$(function () {
        //初始化轮播图
        $("#slider").slidebox({
              boxh: 430,//盒子的高度
              w: 1100,//图片的宽度
              h: 400,//图片的高度
              isShow: true,//是否显示控制器
              isShowBtn: false,//是否显示左右按钮
              controltop: 10,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
              controlsW: 12,//控制按钮宽度
              controlsH: 12,//控制按钮高度
              radius: 6//控制按钮圆角度数
        }); 
        let swiperArr = [1,2,3];
        swiperArr.forEach(function(num,index) {
                     //初始化轮播图
                  $("#slider" + num).slidebox({
                        boxh: 220,//盒子的高度
                        w: 400,//图片的宽度
                        h: 220,//图片的高度
                        isShow: true,//是否显示控制器
                        isShowBtn: true,//是否显示左右按钮
                        controltop: 10,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
                        controlsW: 25,//控制按钮宽度
                        controlsH: 10,//控制按钮高度
                        radius: 1//控制按钮圆角度数
                  });  
        });

      
      
      // 
      /* 行为：1.鼠标移入添加高亮 上面的标题 */
      /*       2.显示对应底部轮播内容 */
      // 初始第一个a标签加上active
      $('.ebook-title > div a:nth-child(1)').addClass('active');


      $('.ebook-title > div a').mouseenter(function() {
            $(this).addClass('active');
            // // 自己的兄弟移出 active
            $(this).siblings().removeClass('active');
            // // 获取当前元素在兄弟间的索引
            let index = $(this).index();
            // console.log(index);
            // // 根据索引让对应ul显示，其他兄弟隐藏
            // // 找到目标ul
            $(`.ebook-swiper > ul:eq(${index})`).css('display','block');
            // // 隐藏其他元素
            $(`.ebook-swiper > ul:eq(${index})`).siblings().css('display','none');
      });

      // 1: 初始化行为
            // 1：第二行以后的内容隐藏
            // 2: 第一行内容显示，标题隐藏
      let $firstLi = $('.new-book li:nth-child(1)');
      $firstLi.find('>p').css('display','none');
      // 1：第二行以后的内容隐藏
      $firstLi.siblings().find('div').css('display','none');


      // 2：行为相关：
      // 2.1 给li绑定鼠标移入事件
      $('.new-book li').mouseenter(function() {
           // 当前：显示内容，隐藏标题
           $(this).find('div').css('display','block');
           $(this).find('>p').css('display','none');
           // 其他：隐藏内容，显示标题
           let $otherLis = $(this).siblings();
           $otherLis.find('div').css('display','none');
           $otherLis.find('>p').css('display','block');
      });

      let colors = ['#93d46f','#f65727','#bb9dee','#ff7394','#c2ec51'];
      // 实现楼层功能变色
      // 1. 鼠标移入背景变色
      // 2. 鼠标移入宽度改变
      // 3. 鼠标移入背景图标x轴位置改变（-40px)
    
      $('.floor li').hover(function(){
            // 鼠标移入
            // $(this).index(); 当前元素在兄弟元素的索引
            let index = $(this).index();
            let newColor = colors[index];
            $(this).css({
                  // {左属性名:右属性值}
                  // 左边：加不加引号都可以  ,特殊符号加引号
                  // 右边: 加引号就是固定的字符串值，不加引号就是使用变量的值
                  // 'ab-c':'11',
                  // 'ab.c':11,
                  backgroundColor:newColor,
                  width:80,
                  backgroundPositionX:-40
            })
      }
      ,function(){
            // 鼠标移出 清零
            $(this).css({
                  backgroundColor:'',
                  width:40,
                  backgroundPositionX:0
            })
      }).click(function() {
            // 获取当前元素的索引值
            // let index = $(this).index();
            // // 拼接flag_id
            // let findId = 'flag_' + index;
            // // 查找元素获取该元素的  offset().top
            // let $findElement = $('#' + findId);
            // let top = $findElement.offset().top;
            // // console.log($findElement);
            // // 滚动 利用动画 + scrollTop  【文档】: html,body
            // $('html,body').stop(true).animate({ scrollTop:top },1000);

            let ids = ['flag_0','flag_1','flag_2','flag_3','flag_4']
            // 固定ID的查找方式
            let index = $(this).index();
            // 拼接flag_id
            let findId = ids[index];
            // 查找元素获取该元素的  offset().top
            let $findElement = $('#' + findId);
            let top = $findElement.offset().top;
            // console.log($findElement);
            // 滚动 利用动画 + scrollTop  【文档】: html,body
            $('html,body').stop(true).animate({ scrollTop:top },1000);
            //A:楼层点击的时候
      });
      // B:文档加载时
      /**
       *    1. 页面中固定定位一个盒子（不用管高度：0）
            2. 滚动页面，监听滚动事件$(window)
            3. 获取当前的卷入顶部的值$(window).scrollTop()
            4. 判断卷入值是否大于800
            5. 将上方的form元素移动到黑盒子，并展示黑盒子
            6. 如果不大于800
            7. 将form元素移动到原来的位置，收起黑盒子
       */
      // $(window).on('scroll',fn)
      $(window).scroll(function () {
            let currentScrollTop = $(window).scrollTop();
            // console.log(currentScrollTop);
            let $subForm = $('#sub-form');
            if (currentScrollTop > 800) {
                  $('.fixed-box').append($subForm);
                  $('.fixed-box').stop().slideDown(1000);
            } else {
                  // $subForm.appendTo('.search-box');
                  $('.fixed-box').stop().slideUp(1000);
                  // 插入到最前面
                  $('.search-box').prepend($subForm);
            }
      });
  });
